<script setup>
import { ref, computed } from 'vue'
const list = ref([])
const total = computed(() => {
    let sum = 0
    list.value.forEach(item => {
        item.prodItems.forEach(prodItem => {
            if (prodItem.childChecked) {
                sum += prodItem.price
            }
        })
    })
    return sum.toFixed(2)
})
for (let i = 0; i < 6; i++) {
    list.value.push({ mallName: '海底捞电力黄埔店', parentChecked: false, prodItems: [{ src: 'https://cdn.uviewui.com/uview/album/9.jpg', price: 30, prodName: '海底捞套餐998', childChecked: false }, { src: 'https://cdn.uviewui.com/uview/album/9.jpg', price: 50, prodName: '海底捞套餐998', childChecked: false }, { src: 'https://cdn.uviewui.com/uview/album/9.jpg', prodName: '海底捞套餐998', childChecked: false, price: 80 }] })
}
const radioChange = (item, checkedIndex = null) => {
    if (checkedIndex !== null) {
        item.prodItems[checkedIndex].childChecked = !item.prodItems[checkedIndex].childChecked
        const flag = item.prodItems.filter(element => element.childChecked === true);
        if (flag.length === item.prodItems.length) {
            item.parentChecked = true
        } else {
            item.parentChecked = false
        }
        return
    }

    item.parentChecked = !item.parentChecked
    item.prodItems.forEach(element => {
        element.childChecked = item.parentChecked
    });
}
</script>
<template>
    <div class="car">
        <div>
            <span>购物车</span>
            <span>管理</span>
        </div>
        <scroll-view class="scrollView" scroll-y>
            <div class="product-item" v-for="(item, index) in list" :key="index">
                <div class="mall-name">
                    <checkbox borderColor="#00A2E8" activeBackgroundColor="#FF7F27" iconColor="#00A2E8" value="cb"
                        color="#eeeeee" style="transform:scale(0.7)" :checked="item.parentChecked"
                        @click="radioChange(item)" />

                    <up-icon name="clock" color="#FF7F27" size="30"></up-icon>
                    {{ item.mallName }}
                </div>
                <div class="product-list" v-for="(prodItem, prodIndex) in item.prodItems" :key="prodIndex">
                    <checkbox class="child-checkbox" borderColor="#00A2E8" activeBackgroundColor="#FF7F27"
                        iconColor="#00A2E8" value="cb" color="#eeeeee" style="transform:scale(0.7)"
                        :checked="prodItem.childChecked" @click="radioChange(item, prodIndex)" />
                    <image :src="prodItem.src" mode="widthFix" />
                    <div>
                        <span>{{ prodItem.prodName }}</span>
                        <span>{{ prodItem.price }}元</span>
                    </div>
                </div>
            </div>

        </scroll-view>

        <div class="car-button">
            <u-icon name="shopping-cart" color="#FF7F27" size="60"></u-icon>
            总计：
            <span>{{ total }}</span>元
            <u-tag style="margin:0 30rpx" text="去结算" type="warning" shape="circle"></u-tag>
        </div>
    </div>
</template>
<style scoped lang="scss">
.car-button {
    position: fixed;
    width: 100%;
    bottom: 100rpx;
    height: 70rpx;
    display: flex;
    z-index: 20;
    background-color: #ffffffda;
    align-items: center;
    justify-content: center;
    text-align: right;
    padding: 10rpx 30rpx;

    span {
        font-size: 50rpx;
        color: #FF7F27;
        letter-spacing: 2rpx;
    }
}

.car {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    background-color: #07a6ea1d;
    padding-top: 30rpx;
    text-shadow: 1rpx 1rpx 1rpx #ccc;

    div:nth-child(1) {
        display: flex;
        justify-content: space-between;
        width: inherit;

        span {
            margin: 0 15px;
        }

    }

    .scrollView {
        width: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;

        .product-item {
            width: inherit;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10rpx;

            .mall-name {
                width: 90%;
                display: flex;
                justify-content: flex-start;
                background-color: #3576d7b8;
                color: #fff;
                border-radius: 20rpx;
                box-shadow: 3px 3px 5px #ccc;
                margin-bottom: 10rpx;
                padding-left: 15rpx;
                height: 80rpx;
                align-items: center;

            }
        }

        .product-list {
            background-color: #ffffffb8;
            padding: 10rpx;
            border-radius: 20rpx;
            margin-bottom: 5rpx;
            box-shadow: 3px 3px 5px #ccc;
            width: 85%;
            display: flex;

            div {
                display: flex;
                flex-direction: column;
                width: calc(100% - 200rpx);
                height: 100%;
                min-height: 200rpx;
                justify-content: space-between;

                span:nth-child(2) {
                    color: #FF7F27;
                    font-size: larger;
                    font-weight: bold;
                }
            }

            .child-checkbox {
                position: relative;
                bottom: 20rpx;
            }

            image {
                margin: 10rpx;
                max-width: 200rpx;
                min-height: 200rpx;
                box-shadow: 3px 3px 5px #ccc;
                border-radius: 10rpx;
            }
        }
    }
}
</style>